<template>
<div>
    <el-button type="primary" @click="dialogFormVisible=true;formData={}; title='添加'">添加</el-button>
    <el-table :data="List" border style="width: 100%" height="500px">
        <el-table-column fixed prop="" label="序号" width="50">
            <template slot-scope="scope">
                {{ scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column fixed prop="purchaseid" label="采购编号" width="100"/>
        <el-table-column fixed prop="recordname" label="商品名称"/>
        <el-table-column fixed prop="number" label="数量"/>
        <el-table-column fixed prop="money" label="单价" width="100"/>
        <el-table-column fixed prop="price" label="总价" width="100"/>
        <el-table-column fixed prop="pdate" label="采购时间" width="200"/>
<!--        <el-table-column fixed="right" label="操作" width="128">-->
<!--            <template slot-scope="scope">-->
<!--                <el-button type="text" @click="dialogFormVisible = true">修改</el-button>-->
<!--            </template>-->
<!--        </el-table-column>-->
    </el-table>

    <el-dialog title="添加" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="采购编号" :label-width="formLabelWidth">
                <el-input v-model="form.purchaseid" autocomplete="off"></el-input>
            </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-select v-model="form.recordid" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.recordid"
                            :label="item.recordname"
                            :value="item.recordid">
                        </el-option>
                    </el-select>
            </el-form-item>

            <el-form-item label="采购数量" :label-width="formLabelWidth">
                <el-input-number v-model="form.number" controls-position="right" @change="handleChange" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="采购单价" :label-width="formLabelWidth">
                <el-input v-model="form.money" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="采购总价" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false;submits('form')">确 定</el-button>
        </div>
    </el-dialog>


</div>
</template>

<script>
export default {
  name: 'Purchase',
    data(){
      return{
          List:[],
          dialogFormVisible: false,
          form: {

              },
            options:[],
          formLabelWidth: '120px'
      };
    },
    created() {
        this.getList();
        this.selPur();
    },
    methods: {
        getList() {
            this.$http.post('/purchase/selectPur').then(res => {
                console.log(res)
                this.$data.List = res;
            })
        },
        handleChange(value) {
            console.log(value);
            // this.form={}
        },
        selPur(){
            this.$http.post('/purchase/selectRec').then(res=>{
                this.$data.options = res;
            })
        }   ,
        submits(from){
            this.$http.post('/purchase/insert',this.$data.form).then(res=>{
                console.log(res)
                if (res){
                    this.$message.success("成功");
                    this.getList();
                    this.dialogFormVisible=false;
                }else {
                    this.$message.error("失败");
                    this.dialogFormVisible=false;
                }
            })
        }
        }

    }
</script>

<style scoped>

</style>
